<template>
	<view>
		<view class="item content">

			<view class="flex" style="align-items: flex-end;">
				<text style="font-size: 32upx;color: #333333;font-weight: bold;">我的银行卡</text>
				<text style="font-size: 24upx;color: #999999;margin-left: 14upx;"
					v-if="cardList.length>0">共{{cardList.length}}张</text>
			</view>

			<view class="bankcard" v-if="cardList.length>0">

				<bankItemMini v-for="(item, index) in cardList" :key="index" :bankCode="item.bankCode"
					:bankName="item.bankCodeStr" :cardCode="item.bankCardNo" :bgColor="item.color"
					:cardType="item.bankCardType == 1?'信用卡':'储蓄卡'" @itemClick="itemClick(item)" />

			</view>


			<text class="logout" @click="addbankcard">+添加银行卡</text>
		</view>


	</view>
</template>

<script>
	import bankItemMini from '../../../components/mine/bank-item-mini.vue';
	import {
		bankCarList
	} from '../../../common/api.js';

	export default {
		components: {
			bankItemMini
		},
		data() {
			return {
				cardList: [],
			}
		},
		methods: {
			itemClick(item) {
				uni.navigateTo({
					url: './bankcardetail' + uni.$u.queryParams(item)
				})
			},

			addbankcard() {
				uni.navigateTo({
					url: './addbankcard'
				})
			},

			getData() {
				bankCarList().then(res => {
					this.cardList = res;


					// this.cardList = [{
					// 	bankCode: 'ICBC',
					// 	bankCodeStr: '工商银行',
					// 	bankCardNo: 789797878979,
					// 	bankCardType: 1,
					// 	mobileNo: 18985623689
					// }, {
					// 	bankCode: 'CCB',
					// 	bankCodeStr: '不知道',
					// 	bankCardNo: 789797878979,
					// 	mobileNo: 18985623689
					// }, {
					// 	bankCode: 'ICBC',
					// 	bankCodeStr: '工商银行',
					// 	bankCardNo: 789797878979,
					// 	bankCardType: 1,
					// 	mobileNo: 18985623689
					// }, {
					// 	bankCode: 'ABC',
					// 	bankCodeStr: '农业',
					// 	bankCardNo: 36333262,
					// 	mobileNo: 18985623689
					// }, {
					// 	bankCode: 'ABC',
					// 	bankCodeStr: '农业',
					// 	bankCardNo: 36333262,
					// }];

					this.cardList = this.cardList.map((item, index) => {
						let mark = index + 1;
						item.color =
							mark % 2 == 0 ? '#2D69D1' :
							mark % 3 == 0 ? '#06B6B8' :
							'#FE5862'
						return item;
					})
				})
			}
		},
		onShow() {
			this.getData();
		},

	}
</script>

<style lang="scss" scoped>
	.content {
		@include flex(column);
		padding: 50upx 25upx 38upx;

		.bankcard {
			margin-top: 68upx;

			.bankcard-card {
				@include flex;
				// position: relative;
				height: 158upx;
				border-radius: 18upx;
				// top: -20upx;
				margin-top: -25upx;
				align-items: center;
				background-color: #00aaff;

				image {
					width: 80upx;
					height: 80upx;
					margin-left: 20upx;
				}

				.name-wrap {
					@include flex(column);
					margin-left: 25upx;
					flex-grow: 1;
					margin-right: 10upx;

					.name {
						font-size: 30upx;
						color: $white;
						font-weight: bold;
					}

					.type {
						font-size: 26upx;
						color: $white;
						margin-top: 8upx;
					}
				}

				.bankno {
					color: $white;
					font-size: 28upx;
					font-weight: bold;
					margin-right: 20upx;
					align-self: flex-start;
					margin-top: 40upx;
				}



			}
		}

		.logout {
			height: 98upx;
			display: block;
			text-align: center;
			line-height: 100upx;
			font-size: 32upx;
			color: $green20;
			border-radius: 13upx;
			background-color: $white;
			border: solid 2upx $green20;
			margin-top: 38upx;
			font-weight: 600;

		}
	}
</style>
